<template>
  <div class="video-preview">
    <div v-if="realSrcList.length === 0">-</div>
    <div v-for="(item, index) in realSrcList" :key="index">
      <el-link type="primary" :href="item.url" target="_blank">
        {{ item.name }}
      </el-link>
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue';
  import { isExternal } from '@/utils/validate';
  import { getToken } from '@/utils/auth';

  const props = defineProps({
    src: {
      type: String,
      default: '',
    },
  });

  const baseUrl = import.meta.env.VITE_APP_BASE_API;

  const realSrcList = computed(() => {
    if (!props.src) {
      return [];
    }
    const real_src_list = props.src.split(',');
    const srcList = [];
    real_src_list.forEach((item) => {
      if (isExternal(item)) {
        srcList.push({
          name: item,
          url: item,
        });
      } else {
        srcList.push({
          name: item.replace(/\/.*\//, ''),
          url: baseUrl + item + `?accessToken=${getToken()}`,
        });
      }
    });
    return srcList;
  });
</script>

<style lang="scss" scoped>
  .video-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>
